<template>
  <div class="maincontent">
    <el-form :inline="true" label-position="right" :model="form" label-width="80px" ref="formData" :rules="formDataRules">
      <div class="maintitle">可行性研究批复</div>
      <div class="formcontent">
        <el-form-item label="实施规模" prop="implementationScale">
          <el-input v-model="form.implementationScale" placeholder="请填入" type="number" :min="0" style="width:250px;" :readonly="isCurrentProcess">
            <template slot="append">公顷</template>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="投资规模" prop="investmentScale">
          <el-input v-model="form.investmentScale" placeholder="请填入" type="number" :min="0"  style="width:250px;" :readonly="isCurrentProcess">
            <template slot="append">万元</template>
          </el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="下达时间" prop="deliveryTime">
          <el-date-picker v-model="form.deliveryTime" placeholder="请选择" style="width:250px" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :readonly="isCurrentProcess"></el-date-picker>
        </el-form-item>
      </div>
      <div v-if="!isCurrentProcess">
        <el-form-item label="批复模板">
          <el-button size="small" type="primary" @click="handleDownloadTemp">下载</el-button>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="提交批复" prop="approvalTemplateFileId">
          <el-upload :action="uploadUrl" :on-success="handleUploadSuccess" v-if="!isCurrentProcess" accept=".pdf">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div class="viewDocment" v-if="isCurrentProcess">
            <seeFujian v-if="form.approvalTemplateFile" @openPdf="seePdf" :file-name="form.approvalTemplateFile | backFileName" :file-url="form.approvalTemplateFile.filePath"/>
            <!-- <span><i class="el-icon-document"/>{{form.approvalTemplateFile | backFileName}}</span>
            <a style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(form.approvalTemplateFile.filePath,form.approvalTemplateFile.fileName)">查看</a> -->
          </div>
        </el-form-item>
      </div>
      <div style="margin-top:40px;">
        <el-form-item>
          <el-button type="primary" @click="onSubmit" v-if="!isCurrentProcess">提交</el-button>
          <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-dialog
      :close-on-click-modal="false"
      :title="pdfName"
      :visible.sync="pdfFlag"
      width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import config from "@/config/index.js";
import moment from "moment";
import {
  insertApprovalInfo,
  getApprovalInfo
} from "@/api/feasibilityStudy/feasibilityStudyApproval.js";
import axios from 'axios'
import {
  validateNotNull,
  validateUpload,
  validateDatetime,
} from "@/utils/validate.js" 
import seeFujian from "@/components/seeFujian";
export default {
  components:{
    seeFujian
  },
  data() {
    return {
      pdfUrl:'',
      pdfFlag:false,
      pdfName:'',
      baseUrl:config.baseUrl,
      projectId:localStorage.getItem('projectId') * 1,
      form: {
        projectId: localStorage.getItem('projectId') * 1,
        implementationScale:"",
        investmentScale:"",
        deliveryTime:"",
        approvalTemplateFileId:""
      },
      formDataRules:{
        implementationScale:[{validator:validateNotNull}],
        investmentScale:[{validator:validateNotNull}],
        deliveryTime:[{validator:validateDatetime}],
        approvalTemplateFileId:[{validator:validateUpload}],
      },
      uploadUrl: config.uploadUrl
    };
  },
  computed:{
    isCurrentProcess:function () {
      let isTrue = localStorage.getItem('key') == 'FEASIBILITY_STUDY_CITY_BUREAU_REPLY';
      if(localStorage.getItem("lookStatus") == 2){
        isTrue = false
      }
      return !isTrue
    }
  },
  filters:{
    backFileName:function (data) {
      if(data){
        return data.fileName
      }else{
        return ""
      }
    },
    backFilePath:function (data,baseUrl) {
      if(data){
        return baseUrl + data.filePath
      }else{
        return "#"
      }
    }
  },
  created() {
    this.getApprovalInfo();
  },
  methods: {
    moment,
    onSubmit() {
      //提交表单
      this.$refs['formData'].validate(valid => {
        if(valid){
          const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        this.form.implementationScale = this.form.implementationScale * 1
        this.form.investmentScale = this.form.investmentScale * 1
        insertApprovalInfo(this.form)
          .then(res => {
            loading.close();
            this.$message({
              message: "提交成功！",
              type: "success"
            });
            this.$router.push('/projectManagement/planningStage/dealwith');
          })
          .catch(res => {
            loading.close();
          });
        }
      })      
    },
    //查看当前PDF
    seePdf(url,name){
      this.pdfFlag = true
      this.pdfUrl = url
      this.pdfName = name
    },
    handleUploadSuccess: function(res, file, fileList) {
      //批复文件上传成功回调
      this.form.approvalTemplateFileId = res.data.id;
      this.$refs['formData'].validate();
    },
    handleDownloadTemp: function() {
      //下载可行性研究批复模板
      const url = config.baseUrl + "/renovation/templatefile/可行性研究批复模板.pdf";
      axios.get(url,{responseType:'blob'}).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement('a');
        let fname = '可行性研究批复模板.pdf';
        link.href = url;
        link.setAttribute('download', fname);
        link.click();
      })
    },
    getApprovalInfo() {
      //获取信息
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getApprovalInfo({ projectId: this.projectId })
        .then(res => {
          loading.close();
          if(res.data){
            this.form = res.data;
            this.form.approvalTemplateFileId = res.data.approvalTemplateFile.id;
          }          
        })
        .catch(res => {
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 10px 40px;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .formcontent {
    margin-top: 30px;
  }
}
</style>
 